<template>
  <div class="div-one">
    <div class="div-two">
      <el-form :inline="true" class="demo-form-inline" ref="form" :model="formBase">
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="目录名称">
              <el-input
                v-model="formBase.directoryName"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="状态">
              <el-select placeholder="请选择" v-model="formBase.state">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="9"
            ><el-button @click="trim">清空</el-button
            ><el-button type="primary" @click="search">搜索</el-button></el-col
          >
          <el-col :span="3"
            ><el-button type="success" icon="el-icon-edit" @click="add"
              >新增目录</el-button
            ></el-col
          >
        </el-row>
      </el-form>
    </div>
    <div class="div-res">
      <i class="el-icon-info">共{{ total }}条记录</i>
    </div>
    <!-- 表格部分 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" align="center">
          <template #default="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="totals" label="状态" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.state }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
                <template v-if="scope.row.state === '禁用'">
                  <el-button type="text" @click="changeStatu(scope.row)"
                    >启用</el-button
                  >
                  <el-button type="text" @click="edit(row.id)">修改</el-button>
                  <el-button type="text" @click="del(row.id)">删除</el-button>
                </template>
                <template v-else>
                  <el-button type="text" @click="changeStatu(scope.row)"
                    >禁用</el-button
                  >
                  <el-button type="text" @click="edit(row.id)" disabled>修改</el-button>
                  <el-button type="text" @click="del(row.id)" disabled>删除</el-button>
                </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="div-button">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryObj.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryObj.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <SubAdd
    :tableData="tableData"
      ref="subAdd"
      :formBase="formBase"
      :text="text"
      :pageTitle="pageTitle"
      :ruleInline="ruleInline"
      @newDataes="newDataes"
      @handleCloseModal="handleCloseModal"
    ></SubAdd>
  </div>
</template>

<script>
import { list, remove, detail, changeState } from '@/api/hmmm/directorys.js'
import SubAdd from '../components/directorys-add.vue'
export default {
  props: {},
  data () {
    return {
      tableData: [],
      formBase: {
        directoryName: '',
        state: '',
        subjectName: '',
        subjectID: ''
      },
      ruleInline: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' }
        ],
        directoryName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      queryObj: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      drawerType: 'add',

      text: '',
      pageTitle: ''
    }
  },
  components: {
    SubAdd
  },
  created () {
    this.dataInfo()
  },

  methods: {
    // 渲染主页面
    async dataInfo () {
      const { data } = await list(this.queryObj)
      // console.log(data)
      this.tableData = data.items
      console.log(this.tableData)
      this.total = data.counts
      this.tableData = this.tableData.map(item => {
        item.state = item.state !== 1 ? '禁用' : '启用'
        return item
      })
    },
    // 分页
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.dataInfo()
    },
    // 每页多少条
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.dataInfo()
    },

    // 清空
    trim () {
      this.formBase.directoryName = ''
      this.formBase.state = ''
      this.dataInfo()
    },
    // 搜索
    async search () {
      const { data } = await list(this.formBase)
      // console.log(data)
      this.tableData = data.items
    },

    //
    async changeStatu (data) {
      // console.log(data)

      this.$confirm(`已成功${data.state}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // remove({ id })
          await changeState({
            id: data.id,
            state: data.state === '启用' ? 0 : 1
          })
          // this.form.state = 0
          this.dataInfo()
          this.$message({
            type: 'success',
            message: `${data.state}成功!`
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    //
    async del (id) {
      // console.log(id)
      await remove({ id })
      this.$message.success('删除成功')
      this.dataInfo()
    },

    //
    // add () {
    //   this.titleInfo.text = '新增'
    //   this.titleInfo.pageTitle = '学科'
    //   this.$refs.subAdd.dialogFormV()
    // }
    add () {
      this.$refs.subAdd.dialogFormV()
      this.text = '新增'
      this.pageTitle = '目录'
    },
    newDataes (formBase) {
      console.log(formBase)
      this.queryObj.page = 1
      this.queryObj.pagesize = 10
      this.dataInfo()
    },
    //
    handleCloseModal () {
      this.$refs.subAdd.dialogFormH()
      this.$refs.subAdd.fun()
    },
    //
    async edit (id) {
      // console.log(id)
      this.formBase.id = id
      this.text = '编辑'
      this.pageTitle = '用户'
      const { data } = await detail(this.formBase)
      // console.log(data)
      this.formBase.subjectName = data.subjectName
      this.formBase.isFrontDisplay = data.isFrontDisplay
      this.$refs.subAdd.dialogFormV()
    }
  },

  computed: {}
}
</script>

<style scoped lang="less">
.div-one {
  padding: 20px;
  .div-two {
    padding: 20px;
    background-color: #fff;
  }
  .div-res {
    padding: 20px;
  }
  .div-button {
    background-color: #fff;
    padding: 20px 0;
    padding-left: 600px;
  }
}
</style>
